<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-form-item label="选择对象">
          <div style="display: flex;align-items: center;">
            <div v-for="(item,index) in nowTreeArr" :key="item.id" class="myCheck" name="type" @click="deleteType(item,index)">{{ item.name }}
              <i class="el-icon-circle-close" />
            </div>
          </div>
        </el-form-item>
        <div class="formtop">
          <el-form-item label="">
            <el-radio-group v-model="form.period_type">
              <el-radio label="day2">日</el-radio>
              <el-radio label="month">月</el-radio>
              <el-radio label="year">年</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="day_time"
            :rules="[
              { required: true, message: '日期不能为空'}
            ]"
            label="日期"
          >
            <el-date-picker v-model="form.day_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-divider />
      <div :id="'energyRanking'" class="energyRanking_box" />
      <el-divider />
      <el-table
        v-if="tableHead.length>0"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="测量点"
        />
        <el-table-column
          v-for="(v,n) in tableHead"
          :key="n"
          :prop="v"
          :label="v"
        />

      </el-table>
      <el-pagination
        v-show="total>0"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="form.offset"
        @current-change="changeOffest"
      />
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import commMix from './commonMix.js'

import { getPowerRanking } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      form: {
        monitor_id: [],
        period_type: 'day2',
        station_id: [],
        day_time: '',
        offset: 1,
        limit: 10
      },
      treeObj: [],
      value2: [],
      dropDownValue: '',
      optionsMetaAll: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      optionsMetaShow: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      valueMeta: [],
      input3: '',
      IndexGroup: [],
      nowTreeArr: [],
      optionArr: [],
      indexGroupParameterArr: [],
      chartArr: [],
      tableData: [],
      tableHead: [],
      total: 0
    }
  }, watch: {
    choseData: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        // console.log(newV)
        // console.log(this.nowTreeArr)
        for (var i = 0; i < this.nowTreeArr.length; i++) {
          if (newV.id === this.nowTreeArr[i].id) {
            return
          }
          // 去重
        }
        this.nowTreeArr.push(newV)
        if (this.nowTreeArr.length === 1) {
          this.form.day_time = this.getDay(0)
          this.search()
        }
        console.log(this.nowTreeArr)
      }
    }
  },
  mounted() {
    // this.setEnergyRanking()

  },
  methods: {
    changeOffest() {
      this.form.offset = arguments[0]
      this.search()
    },
    search() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          var monitorIdArr = []
          if (this.nowTreeArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择监控设备',
              type: 'error'
            })
            return
          }
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            monitorIdArr.push(this.nowTreeArr[i].id)
            this.form.station_id.push(this.nowTreeArr[i].site_id)
          }
          this.form.station_id = Array.from(new Set(this.form.station_id))
          this.form.monitor_id = monitorIdArr
          getPowerRanking(this.form).then((res) => {
            console.log(res.data)
            this.setEnergyRanking(res.data)
            this.total = res.data.table.count
            this.tableHead = res.data.table[0].data
            var arr = []
            for (var i = 1; i < res.data.table.length; i++) {
              var obj = {}
              for (var j = 0; j < res.data.table[i].data.length; j++) {
                obj[res.data.table[0].data[j]] = res.data.table[i].data[j]
              }
              obj.name = res.data.table[i].name
              arr.push(obj)
            }
            console.log(arr)
            this.tableData = arr
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    dropDownSearch() {
      var _this = this
      _this.valueMeta = []
      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
    },
    filterSearch(item) {
      return item.includes(this.dropDownValue)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    setEnergyRanking(v, n) {
      echarts.dispose(document.getElementById('energyRanking'))
      var myChart = echarts.init(document.getElementById('energyRanking'))
      // 绘制图表
      var option = {
        title: {
          text: '数据分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: 'category',
          data: v.xData
        },
        yAxis: {
          type: 'value',
          name: ''
        },
        legend: {
          data: v.legend,
          itemGap: 5
        },
        series: v.series
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .tableHead {
    background-color: #EDF1F8 !important;
  }

  .formtop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .min_box{
    width: 100%;
    height: 70vh;
    .el-card{
      &>div{
        width: 100%;
        height: 40vh;
      }
    }
  }
  #energyRanking,.energyRanking_box{
    width: 100%;
    height: 40vh;
  }
  .bottom_box{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &>div{
      width: 45%;
      height: 34vh;
    }
  }
  .myCheck{
    padding:0 30px 0 20px;
    border: 1px solid #c6c6c6;
    border-radius: 10px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    i{
		color:#c6c6c6;
      font-size: 25px;
      position: absolute;
      right: 0;
      top:50%;
      transform: translateY(-50%);
    }
  }
</style>
